<template>
    <div style="padding-top: 46px">
        <van-nav-bar
                :fixed="fixed"
                :title="$route.params.title"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div style="margin: 0px 0px 10px 0px;padding: 0 5px">
            <div v-for="commodityListName in commodityList" class="commodity-list-title">
                <div @click="commodityDetails(commodityListName.id)" class="commodity-list-content">
                    <div class="img-wrap">
                        <div class="img" :style="{background:'url('+commodityListName.thumbnail+')',
                     backgroundPosition:'center',backgroundRepeat: 'no-repeat',backgroundSize: 'cover' }">
                        </div>
                    </div>
                    <!--<div class="describe">{{commodityListName.describe}}</div>-->
                    <div class="goods-title">{{commodityListName.title}}</div>
                    <div class="goods-price">￥{{commodityListName.price}}</div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</template>

<script>
    import {MallItems} from "../api/data";
    import Vue from 'vue'
    import {NavBar} from 'vant';

    Vue.use(NavBar);
    export default {
        data() {
            return {
                fixed: true,
                selected: '1',
                commodityList: [],
                uid: ''
            };
        },
        methods: {
            returnList() {
                this.$router.back(-1);
            },
            onClickLeft() {
                this.$router.back()
            },
            commodityDetails(id) {
                this.$router.push({
                    path: `/commoditydetails`,
                    query: {'id': id}
                })
            }
        },
        activated() {
            if (this.$route.params.id) {
                this.uid = this.$route.params.id
                MallItems(this.uid).then(res => {
                    console.log(res.data.data)
                    this.commodityList = res.data.data.list
                })
            }
        },
        beforeRouteLeave(to, from, next) {
            // if (to.path == "/order") {
            //     to.meta.keepAlive = false;
            // } else {
            //     to.meta.keepAlive = true;
            // }
            next();
        }
    }
</script>

<style scoped>
    .describe {
        font-size: 10px;
        padding: 10px;
        background-color: #F5F2F0;
    }

    .color {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.02);
    }

    .img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #f9f9f9;
    }

    .img-wrap {
        position: relative;
        background: #eee;
    }

    .img-wrap:before {
        content: ' ';
        display: block;
        padding-top: 100%;
    }

    .commodity-list-title {
        margin-top: 10px;
        float: left;
        width: 50%;
        padding: 0px 5px;
    }

    .title-font-size {
        padding: 18px;
        width: 80%;
        font-size: 18px;
        text-align: center;
    }

    .head-title {
        display: flex;
        height: 60px;
    }

    .navigation-img {
        height: 60px;
    }

    .commodity-list-content {
        background: #fff;
        box-shadow: 1px 1px 8px #eee;
    }

    .goods-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        padding: 2px 4px;
    }

    .goods-price {
        color: red;
        padding: 2px 4px;
        font-size: 12px;
    }
</style>
